<template>
  <div class="table-wrapper">
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      rowKey="userid"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'role'">
          {{ getRoleText(record) }}
        </template>
        <template v-if="column.dataIndex === 'authStatus'">
          {{ record.authStatus ? '已授权' : '未授权' }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space :size="8">
            <!-- <a-button type="primary" @click="onActionClick('start', record)">
              启用
            </a-button>
            <a-button @click="onActionClick('stop', record)"> 停用 </a-button> -->
            <a-button type="primary" @click="onActionClick('edit', record)">
              编辑
            </a-button>
            <a-button @click="onActionClick('read', record)"> 查看 </a-button>
            <a-button type="danger" @click="onActionClick('dimission', record)">
              离职
            </a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { useStore } from 'vuex';
import { RoleOption } from '@/views/organization/constant';
import FormDataDrawer from '@/views/formHome/components/homeArea/DataDrawer.vue';

export default defineComponent({
  name: 'TableWrapper',
  components: {
    FormDataDrawer,
  },
  props: {
    columns: {
      type: Array as any,
      default: () => [],
    },
  },
  setup(prop, context) {
    const store = useStore();
    const dataSource = computed(() => store.state.organization.users);
    const pagination = {
      defaultPageSize: 10,
      responsive: true,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showTotal: (total: number) => `共${total}条`,
    };
    const selectedRowKeys = computed({
      get: () => store.state.organization.selectedRowKeys,
      set: (val) => store.commit('organization/SetSelectedRowKeys', val),
    });
    const onSelectChange = (selectedKeys: string[], selectedRows: any) => {
      selectedRowKeys.value = selectedKeys;
    };
    const onActionClick = (type: string, record: any) => {
      switch (type) {
        case 'edit':
          context.emit('onOpenDrawer', 'edit', record);
          break;
        case 'read':
          context.emit('onOpenDrawer', 'read', record);
          break;
        case 'dimission':
          context.emit('onDimission', record);
          break;
        default:
          break;
      }
    };
    const getRoleText = (record: any) => {
      const item = RoleOption.find((it) => it.value === record.role);
      return item?.label ?? '';
    };

    return {
      dataSource,
      pagination,
      selectedRowKeys,
      onSelectChange,
      onActionClick,
      getRoleText,
    };
  },
});
</script>

<style lang="less" scoped>
.table-wrapper {
  position: relative;
  height: calc(100% - 84px);
  padding: 0 32px;
  :deep .ant-table-wrapper {
    height: 100%;
    .ant-spin-nested-loading,
    .ant-spin-container {
      height: 100%;
    }
    .ant-table {
      height: calc(100% - 64px);
      .ant-table-thead {
        & > tr > th {
          font-weight: 600;
          background-color: @rb-background-color;
        }
      }
    }
    .ant-pagination {
      margin: 0;
      padding: 16px 0;
    }
  }
}
</style>
